<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue</title>
  </head>
  <body>
    <div id="app">
      <form @submit.prevent="register">
        <label for="name">用户名</label>
        <input id="name" type="text" v-model.lazy.trim="user.name" />
        <label for="name">邮箱</label>
        <input id="email" type="email" v-model="user.email" /><br/>
        <label for="name">密码</label>
        <input id="password" type="password" v-model="user.password" />
        <label for="age">年龄</label>
        <input id="age" type="text" v-model.number="user.age" /><br/>
        <label >性别</label>
        <template v-for="item in GENDERS">
          <input :id="item.value" type="radio" :value="item.value" v-model="user.gender" />
          <label :for="item.value">{{item.title}}</label>
        </template>
        <label>国家</label>
        <select v-model="user.country">
          <option v-for="item in COUNTRIES" :value="item.value">{{item.title}}</option>
        </select>
        <label>爱好</label>
        <template v-for="item in HOBBIES">
          <input :id="item.value" type="checkbox" :value="item.value" v-model="user.hobbies" />
          <label :for="item.value">{{item.title}}</label>
        </template>
        <label>自我介绍</label>
        <textarea v-model="user.desc"></textarea>
        <input type="submit"/>
      </form>
      <div>
        <p>用户名:#{{user.name}}#</p>
        <p>邮箱:{{user.email}}</p>
        <p>密码:{{user.password}}</p>
        <p>年龄:{{user.age}}</p>
        <p>性别:{{user.gender}}</p>
        <p>国家:{{user.country}}</p>
        <p>爱好:{{user.hobbies}}</p>
        <p>介绍:{{user.desc}}</p>
      </div>
    </div>
    <script src="vue.js"></script>
    <script>
      const COUNTRIES = [//国家
        {value:'cn',title:"中国"},
        {value:'us',title:"美国"},
        {value:'uk',title:"英国"}
      ]
      const HOBBIES = [//爱好
        {value:'football',title:"足球"},
        {value:'basketball',title:"篮球"},
        {value:'baseball',title:"棒球"}
      ]
      const GENDERS = [//性别
        {value:'male',title:"男"},
        {value:'female',title:"女"}
      ]
      var vm = new Vue({
        el: "#app",
        data: {
          GENDERS,HOBBIES,COUNTRIES,
          user:{
            name:'',//用户名
            password:'',//密码
            email:'',//邮箱
            age:18,//年龄
            gender:'male',//性别 male 男 female女
            country:'cn',//国家 cn 中国
            hobbies:[],
            desc:''
          }
        },
        methods:{
          register(){
            let {user} = this;
            console.log('提交用户:',user)
          }
        }
      });
    </script>
  </body>
</html>
